import 'dart:convert';

import 'package:crypto/crypto.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart' hide WidgetPaddingX;
import 'package:hotpot/models/shop_detail.dart';
import 'package:hotpot/pages/table/table_page.dart' as table;
import 'package:hotpot/widgets/styles/icon_box.dart';
import 'package:hotpot/widgets/styles/num_keyboard.dart';
import 'package:hotpot/widgets/widget_ext.dart';
import 'package:hotpot/widgets/z_container.dart';

class ConfirmaPinWidget extends StatefulWidget {
  final void Function() onClose;
  final void Function(int staffId) onConfirma;
  final ShopDetail? shop;

  const ConfirmaPinWidget(this.onClose, this.onConfirma, {super.key, this.shop});

  @override
  State<ConfirmaPinWidget> createState() => _ConfirmaPinWidgetState();
}

class _ConfirmaPinWidgetState extends State<ConfirmaPinWidget> {
  var staffId = 0.obs;
  var staffPassword = ''.obs;

  ShopDetail get detail => widget.shop ?? table.detail;

  final colors = [
    const Color(0xFFAD30FB),
    const Color(0xFF22CE67),
    const Color(0xFF0022AA),
    const Color(0xFFE04444),
    const Color(0xFFFF7648),
    const Color(0xFFFFA242),
    const Color(0xFF002275),
    const Color(0xFFFFC033),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    staffId.value = detail.hrEmployees!.first.id!;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        const ZContainer(
          height: double.infinity,
          color: Colors.white38,
        ).gestureDetector(onTap: widget.onClose).expanded(),
        // const SizedBox(height: double.infinity).gestureDetector(onTap: widget.onClose).expanded(),
        ZContainer(
          width: 190,
          color: const Color(0xFFFFFFFF),
          showShadows: true,
          child: Column(
            children: [
              const IconBox(Icons.highlight_remove_rounded, 18, 16, bgColor: Colors.transparent)
                  .paddingOnly(top: 9, right: 9)
                  .gestureDetector(onTap: widget.onClose)
                  .alignRight(),
              staffBox(),
            ],
          ),
        ),
      ],
    );
  }

  staffBox() {
    item(ShopDetailHrEmployees emp) {
      return Obx(
        () {
          var select = emp.id == staffId.value;
          return Stack(
            children: [
              Column(
                children: [
                  5.hSizedBox,
                  ZContainer(
                    width: 34,
                    height: 30,
                    radius: 6,
                    side: const BorderSide(width: 1, color: Color(0xFF303030)),
                    alignment: Alignment.center,
                    child: emp.name![0].text(size: 10, bold: true, color: const Color(0xFF363636)),
                  ),
                  2.hSizedBox,
                  emp.name.text(size: 6, bold: true, color: Colors.black),
                ],
              ),
              if (select)
                const IconBox(
                  Icons.check_circle,
                  12,
                  10,
                  bgColor: Colors.transparent,
                  color: Color(0xFF22CE67),
                ).positioned(right: 0, top: 0),
            ],
          ).opacity(select ? 1 : 0.5).gestureDetector(onTap: () {
            staffId.value = emp.id!;
            staffPassword.value = '';
          });
        },
      );
    }

    return ZContainer(
      width: 186,
      color: const Color(0xFFFFFFFF),
      child: Column(
        children: [
          17.hSizedBox,
          'Confirma Pin'.text(size: 10, color: Colors.black),
          15.hSizedBox,
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ...detail.hrEmployees?.map(item) ?? [],
              ],
            ),
          ),
          1.wSizedBox.expanded(),
          Obx(
            () => List.generate(staffPassword.value.length, (index) => '*')
                .join('')
                .text(size: 15, bold: true, color: Colors.black),
          ),
          19.hSizedBox,
          NumKeyboard(onTap: (key) {
            if (key == 'X') {
              if (staffPassword.value.isNotEmpty) {
                staffPassword.value = List.generate(staffPassword.value.length - 1, (index) => staffPassword.value[index]).join();
              }
            } else if (key.isEmpty) {
            } else {
              staffPassword.value += key;
            }
            if (kDebugMode && staffPassword.value.length == 4) {
              widget.onConfirma(staffId.value);
            }
          }),
          10.hSizedBox,
          ZContainer(
            color: const Color(0xFF22CE67),
            height: 33,
            radius: 8,
            alignment: Alignment.center,
            margin: const EdgeInsets.symmetric(horizontal: 17),
            child: 'OK'.text(size: 12, bold: true, color: Colors.white),
          ).gestureDetector(onTap: () {
            var emp = detail.hrEmployees?.firstWhere((e) => e.id == staffId.value);
            var bytes = utf8.encode(staffPassword.value);
            var digest = sha1.convert(bytes);
            if (digest.toString() == emp?.pin || kDebugMode) {
              widget.onConfirma(staffId.value);
            }
          }),
          10.hSizedBox,
        ],
      ),
    ).expanded();
  }
}
